<template>
    <div class="mine">
      <h3>饿了么</h3>
      <div class="card">
          <span class="p1">吃货卡</span>
          <span class="p2">吃货豆 <span class="teshu">1461</span></span><br>
          <p class="p4">升级吃货卡，每月获取满减红包</p>
      </div>
      <div>
          <p class="tit">常用工具</p>
          <ul>
              <li v-for="(item,index) in list" :key="index">
              <img :src="item.pic" alt="">
              <p>{{item.name}}</p>
              </li>>
          </ul>
      </div>
    </div>
  </template>
  
  <script>
  import pic from "../assets/dingwei.webp"
  export default {
      data(){
          return{
              list:[
                  {name:"我的地址",pic},
                  {name:"我的咨询",pic},
                  {name:"店铺关注",pic},
                  {name:"评价有礼",pic}
              ]
          }
      }
  }
  </script>
  
  <style lang="scss" scoped>
  .card{
      width: 100%;
      height: 100px;
      background-color: skyblue;
      border-radius: 12px;
      margin-top: 20px;
  }
  .tit{
      font-weight: bold;
      margin: 10px 5px;
  }
  .p1{
      font-size: 20px;
      color: #fff;
  }
  .p2{
      margin-left: 20px;
      font-size: 14px;
      color: #fff;
  }
  .teshu{
      font-size: 16px;
  }
  .p4{
      margin-top: 20px;
      color: #fff;
  }
  ul{
      width: 100%;
      list-style: none;
      display: flex;
  }
  ul li{
      width: 25%;
      height: 60px;
      font-size: 14px;
      
  }
  img{
      width: 50px;
      height: 50px;
  }
  </style>
